<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>星座运程 - 精准筛选查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #9333ea; /* 紫色主调 */
            --primary-light: #a855f7;
            --primary-dark: #7e22ce;
            /* 星座颜色 */
            --aries: #e11d48;    /* 白羊座-红色 */
            --taurus: #166534;   /* 金牛座-绿色 */
            --gemini: #ca8a04;   /* 双子座-黄色 */
            --cancer: #0f766e;   /* 巨蟹座-青绿色 */
            --leo: #ea580c;      /* 狮子座-橙色 */
            --virgo: #0369a1;    /* 处女座-蓝色 */
            --libra: #7c3aed;    /* 天秤座-紫色 */
            --scorpio: #4c1d95;  /* 天蝎座-深紫 */
            --sagittarius: #0ea5e9; /* 射手座-天蓝色 */
            --capricorn: #6b7280; /* 摩羯座-灰色 */
            --aquarius: #14b8a6;  /* 水瓶座-青色 */
            --pisces: #ec4899;    /* 双鱼座-粉色 */
            
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --text-primary: #111827;
            --text-secondary: #4b5563;
            --radius: 10px;
            --shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--gray-50);
            color: var(--text-primary);
            padding-top: 50px;
            padding-bottom: 60px;
            line-height: 1.5;
        }
        
        /* 导航栏样式 */
        .navbar {
            height: 50px;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            padding: 0 15px;
        }
        
        .navbar-brand {
            color: var(--primary);
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .nav-actions {
            display: flex;
            gap: 15px;
            font-size: 1.1rem;
        }
        
        /* 筛选区域通用样式 */
        .filter-section {
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            padding: 10px 15px;
        }
        
        .filter-title {
            font-size: 0.85rem;
            color: var(--gray-600);
            margin-bottom: 8px;
        }
        
        /* 星座筛选 */
        .zodiac-filter {
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .zodiac-filter::-webkit-scrollbar {
            display: none;
        }
        
        .zodiac-options {
            display: flex;
            gap: 12px;
            padding-bottom: 5px;
        }
        
        .zodiac-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
        }
        
        .zodiac-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
        
        .zodiac-name {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .zodiac-option.active .zodiac-name {
            color: var(--primary);
            font-weight: 500;
        }
        
        .zodiac-option.active .zodiac-icon {
            box-shadow: 0 0 0 2px var(--primary);
        }
        
        /* 时间筛选 */
        .time-options {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 5px;
            scrollbar-width: none;
        }
        
        .time-options::-webkit-scrollbar {
            display: none;
        }
        
        .time-option {
            padding: 6px 14px;
            background-color: var(--gray-100);
            border-radius: 18px;
            font-size: 0.8rem;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .time-option.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 运势类型筛选 */
        .category-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .category-option {
            padding: 5px 12px;
            background-color: var(--gray-100);
            border-radius: 16px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .category-option.active {
            background-color: rgba(147, 51, 234, 0.1);
            color: var(--primary);
            border: 1px solid var(--primary);
        }
        
        /* 高级筛选区域 */
        .advanced-filter {
            background-color: white;
            border-radius: var(--radius);
            margin: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .filter-header {
            padding: 12px 15px;
            font-size: 0.9rem;
            font-weight: 500;
            border-bottom: 1px solid var(--gray-100);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-collapse {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        }
        
        .filter-collapse.show {
            padding: 15px;
            max-height: 500px;
            transition: max-height 0.5s ease-in, padding 0.3s ease-in;
        }
        
        /* 评分筛选 */
        .rating-filter {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .rating-label {
            font-size: 0.85rem;
            flex-shrink: 0;
            width: 60px;
        }
        
        .rating-options {
            flex: 1;
            display: flex;
            gap: 5px;
        }
        
        .rating-star {
            color: var(--gray-300);
            font-size: 1.2rem;
        }
        
        .rating-star.active {
            color: #f59e0b;
        }
        
        /* 筛选按钮组 */
        .filter-actions {
            display: flex;
            gap: 10px;
            padding: 10px 15px;
            background-color: var(--gray-50);
            border-top: 1px solid var(--gray-100);
        }
        
        .reset-filter {
            flex: 1;
            padding: 8px;
            background-color: white;
            border: 1px solid var(--gray-300);
            border-radius: 6px;
            font-size: 0.85rem;
        }
        
        .apply-filter {
            flex: 1;
            padding: 8px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        /* 结果排序 */
        .sort-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
        }
        
        .result-count {
            font-size: 0.85rem;
            color: var(--gray-600);
        }
        
        .sort-selector {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        /* 运程列表样式 */
        .horoscope-list {
            margin: 10px;
        }
        
        .horoscope-item {
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-bottom: 10px;
        }
        
        .horoscope-header {
            padding: 12px 15px;
            border-bottom: 1px solid var(--gray-100);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .zodiac-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .zodiac-badge {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9rem;
        }
        
        .zodiac-details {
            display: flex;
            flex-direction: column;
        }
        
        .zodiac-fullname {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .zodiac-meta {
            font-size: 0.75rem;
            color: var(--gray-600);
            display: flex;
            gap: 8px;
        }
        
        .fortune-score {
            display: flex;
            align-items: center;
            gap: 5px;
            background-color: rgba(147, 51, 234, 0.1);
            color: var(--primary);
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .score-stars {
            color: #f59e0b;
            font-size: 0.7rem;
        }
        
        .horoscope-content {
            padding: 12px 15px;
        }
        
        .fortune-overview {
            font-size: 0.85rem;
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        /* 图片布局 */
        .image-container {
            margin: 10px 0;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .multiple-images {
            display: flex;
            gap: 5px;
        }
        
        .multiple-images img {
            flex: 1;
            height: 80px;
            object-fit: cover;
        }
        
        .no-image {
            display: none;
        }
        
        /* 运势分类标签 */
        .fortune-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        
        .fortune-tag {
            padding: 2px 8px;
            background-color: var(--gray-100);
            border-radius: 10px;
            font-size: 0.7rem;
            color: var(--gray-700);
        }
        
        .fortune-tag.highlight {
            background-color: rgba(147, 51, 234, 0.1);
            color: var(--primary);
        }
        
        /* 加载更多 */
        .load-more {
            padding: 15px;
            text-align: center;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 7px 20px;
            border-radius: 18px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: white;
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
        }
        
        .nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.65rem;
            color: var(--gray-600);
            text-decoration: none;
        }
        
        .nav-tab i {
            font-size: 1rem;
            margin-bottom: 3px;
        }
        
        .nav-tab.active {
            color: var(--primary);
        }
        
        /* 筛选器动画 */
        .rotate-icon {
            transition: transform 0.3s ease;
        }
        
        .rotate-icon.rotate {
            transform: rotate(180deg);
        }
        
        /* 适配小屏幕 */
        @media (max-width: 320px) {
            .category-option {
                padding: 4px 10px;
                font-size: 0.75rem;
            }
            
            .time-option {
                padding: 5px 10px;
                font-size: 0.75rem;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar fixed-top">
        <div class="container-fluid d-flex justify-content-between align-items-center">
            <span class="navbar-brand">星座运程查询</span>
            <div class="nav-actions">
                <i class="fas fa-search"></i>
                <i class="fas fa-history"></i>
            </div>
        </div>
    </nav>
    
    <!-- 星座筛选 -->
    <div class="filter-section">
        <div class="filter-title">选择星座</div>
        <div class="zodiac-filter">
            <div class="zodiac-options">
                <div class="zodiac-option active">
                    <div class="zodiac-icon" style="background-color: var(--aries);">
                        <i class="fas fa-fire"></i>
                    </div>
                    <span class="zodiac-name">白羊座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--taurus);">
                        <i class="fas fa-bull"></i>
                    </div>
                    <span class="zodiac-name">金牛座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--gemini);">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <span class="zodiac-name">双子座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--cancer);">
                        <i class="fas fa-home"></i>
                    </div>
                    <span class="zodiac-name">巨蟹座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--leo);">
                        <i class="fas fa-lion"></i>
                    </div>
                    <span class="zodiac-name">狮子座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--virgo);">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <span class="zodiac-name">处女座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--libra);">
                        <i class="fas fa-balance-scale"></i>
                    </div>
                    <span class="zodiac-name">天秤座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--scorpio);">
                        <i class="fas fa-scorpion"></i>
                    </div>
                    <span class="zodiac-name">天蝎座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--sagittarius);">
                        <i class="fas fa-arrow-right"></i>
                    </div>
                    <span class="zodiac-name">射手座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--capricorn);">
                        <i class="fas fa-mountain"></i>
                    </div>
                    <span class="zodiac-name">摩羯座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--aquarius);">
                        <i class="fas fa-water"></i>
                    </div>
                    <span class="zodiac-name">水瓶座</span>
                </div>
                <div class="zodiac-option">
                    <div class="zodiac-icon" style="background-color: var(--pisces);">
                        <i class="fas fa-fish"></i>
                    </div>
                    <span class="zodiac-name">双鱼座</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 时间筛选 -->
    <div class="filter-section">
        <div class="filter-title">选择时间范围</div>
        <div class="time-options">
            <div class="time-option active">今日</div>
            <div class="time-option">明日</div>
            <div class="time-option">本周</div>
            <div class="time-option">本月</div>
            <div class="time-option">本季度</div>
            <div class="time-option">上半年</div>
            <div class="time-option">下半年</div>
            <div class="time-option">全年</div>
            <div class="time-option">自定义</div>
        </div>
    </div>
    
    <!-- 运势类型筛选 -->
    <div class="filter-section">
        <div class="filter-title">选择运势类型</div>
        <div class="category-options">
            <div class="category-option active">
                <i class="fas fa-star"></i>
                <span>综合运势</span>
            </div>
            <div class="category-option">
                <i class="fas fa-heart"></i>
                <span>爱情运势</span>
            </div>
            <div class="category-option">
                <i class="fas fa-briefcase"></i>
                <span>事业运势</span>
            </div>
            <div class="category-option">
                <i class="fas fa-money-bill"></i>
                <span>财运运势</span>
            </div>
            <div class="category-option">
                <i class="fas fa-heartbeat"></i>
                <span>健康运势</span>
            </div>
            <div class="category-option">
                <i class="fas fa-users"></i>
                <span>人际关系</span>
            </div>
            <div class="category-option">
                <i class="fas fa-graduation-cap"></i>
                <span>学业运势</span>
            </div>
        </div>
    </div>
    
    <!-- 高级筛选 -->
    <div class="advanced-filter">
        <div class="filter-header" id="advancedFilterHeader">
            <span>高级筛选</span>
            <i class="fas fa-chevron-down rotate-icon"></i>
        </div>
        <div class="filter-collapse" id="advancedFilterContent">
            <!-- 评分筛选 -->
            <div class="rating-filter">
                <div class="rating-label">最低评分</div>
                <div class="rating-options">
                    <i class="fas fa-star rating-star active" data-rating="1"></i>
                    <i class="fas fa-star rating-star active" data-rating="2"></i>
                    <i class="fas fa-star rating-star active" data-rating="3"></i>
                    <i class="fas fa-star rating-star" data-rating="4"></i>
                    <i class="fas fa-star rating-star" data-rating="5"></i>
                </div>
            </div>
            
            <!-- 包含内容筛选 -->
            <div class="filter-title">包含内容</div>
            <div class="category-options">
                <div class="category-option">
                    <i class="fas fa-image"></i>
                    <span>带图片</span>
                </div>
                <div class="category-option">
                    <i class="fas fa-video"></i>
                    <span>带视频</span>
                </div>
                <div class="category-option">
                    <i class="fas fa-chart-line"></i>
                    <span>带分析</span>
                </div>
                <div class="category-option">
                    <i class="fas fa-lightbulb"></i>
                    <span>带建议</span>
                </div>
            </div>
            
            <!-- 作者筛选 -->
            <div class="filter-title" style="margin-top: 10px;">运势作者</div>
            <div class="category-options">
                <div class="category-option active">
                    <i class="fas fa-user"></i>
                    <span>全部作者</span>
                </div>
                <div class="category-option">
                    <i class="fas fa-check-circle"></i>
                    <span>官方认证</span>
                </div>
                <div class="category-option">
                    <i class="fas fa-star"></i>
                    <span>知名占星师</span>
                </div>
            </div>
        </div>
        
        <!-- 筛选操作按钮 -->
        <div class="filter-actions">
            <button class="reset-filter">重置筛选</button>
            <button class="apply-filter">应用筛选</button>
        </div>
    </div>
    
    <!-- 结果排序 -->
    <div class="sort-section">
        <div class="result-count">找到 12 条符合条件的运势</div>
        <div class="sort-selector">
            <span>排序方式：</span>
            <span style="color: var(--primary); font-weight: 500;">推荐</span>
            <i class="fas fa-chevron-down" style="font-size: 0.7rem;"></i>
        </div>
    </div>
    
    <!-- 运势列表 -->
    <div class="horoscope-list">
        <!-- 1. 带单图的运势 -->
        <div class="horoscope-item">
            <div class="horoscope-header">
                <div class="zodiac-info">
                    <div class="zodiac-badge" style="background-color: var(--aries);">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="zodiac-details">
                        <span class="zodiac-fullname">白羊座今日综合运势</span>
                        <div class="zodiac-meta">
                            <span>3月21日-4月19日</span>
                            <span>·</span>
                            <span>占星师李明</span>
                        </div>
                    </div>
                </div>
                <div class="fortune-score">
                    <div class="score-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                    <span>80分</span>
                </div>
            </div>
            
            <div class="horoscope-content">
                <p class="fortune-overview">白羊座今日整体运势向好，工作中会有新的机遇出现，不妨主动把握。感情方面，单身者有机会遇到心仪对象，恋爱中的人感情升温。</p>
                
                <div class="image-container single-image">
                    <img src="https://picsum.photos/id/1039/800/400" alt="白羊座运势图片">
                </div>
                
                <div class="fortune-tags">
                    <span class="fortune-tag highlight">幸运色：红色</span>
                    <span class="fortune-tag highlight">幸运数字：9</span>
                    <span class="fortune-tag">贵人星座：狮子座</span>
                </div>
            </div>
        </div>
        
        <!-- 2. 带多图的运势 -->
        <div class="horoscope-item">
            <div class="horoscope-header">
                <div class="zodiac-info">
                    <div class="zodiac-badge" style="background-color: var(--aries);">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="zodiac-details">
                        <span class="zodiac-fullname">白羊座本周爱情运势</span>
                        <div class="zodiac-meta">
                            <span>3月21日-4月19日</span>
                            <span>·</span>
                            <span>占星师王芳</span>
                        </div>
                    </div>
                </div>
                <div class="fortune-score">
                    <div class="score-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <span>85分</span>
                </div>
            </div>
            
            <div class="horoscope-content">
                <p class="fortune-overview">白羊座本周爱情运势极佳，单身者有望在社交场合遇到真爱，恋爱中的人适合安排一次短途旅行增进感情，已婚者感情稳定和谐。</p>
                
                <div class="image-container multiple-images">
                    <img src="https://picsum.photos/id/1027/300/300" alt="爱情运势图片1">
                    <img src="https://picsum.photos/id/1062/300/300" alt="爱情运势图片2">
                </div>
                
                <div class="fortune-tags">
                    <span class="fortune-tag highlight">约会吉日：周三</span>
                    <span class="fortune-tag">感情建议：主动沟通</span>
                </div>
            </div>
        </div>
        
        <!-- 3. 无图的运势 -->
        <div class="horoscope-item">
            <div class="horoscope-header">
                <div class="zodiac-info">
                    <div class="zodiac-badge" style="background-color: var(--aries);">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="zodiac-details">
                        <span class="zodiac-fullname">白羊座本月事业运势</span>
                        <div class="zodiac-meta">
                            <span>3月21日-4月19日</span>
                            <span>·</span>
                            <span>职业占星院</span>
                        </div>
                    </div>
                </div>
                <div class="fortune-score">
                    <div class="score-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                    <span>65分</span>
                </div>
            </div>
            
            <div class="horoscope-content">
                <p class="fortune-overview">白羊座本月事业运势中等，工作压力较大，需要注意劳逸结合。中旬可能会有一次职位调整的机会，建议提前做好准备。与同事相处需注意沟通方式，避免冲突。</p>
                
                <div class="image-container no-image">
                    <!-- 无图片 -->
                </div>
                
                <div class="fortune-tags">
                    <span class="fortune-tag highlight">贵人：直属上司</span>
                    <span class="fortune-tag">注意：避免冲动决策</span>
                    <span class="fortune-tag">机遇：中旬</span>
                </div>
            </div>
        </div>
        
        <!-- 4. 带分析的运势 -->
        <div class="horoscope-item">
            <div class="horoscope-header">
                <div class="zodiac-info">
                    <div class="zodiac-badge" style="background-color: var(--aries);">
                        <i class="fas fa-fire"></i>
                    </div>
                    <div class="zodiac-details">
                        <span class="zodiac-fullname">白羊座年度财运分析</span>
                        <div class="zodiac-meta">
                            <span>3月21日-4月19日</span>
                            <span>·</span>
                            <span>财经占星师</span>
                        </div>
                    </div>
                </div>
                <div class="fortune-score">
                    <div class="score-stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                    <span>78分</span>
                </div>
            </div>
            
            <div class="horoscope-content">
                <p class="fortune-overview">白羊座本年度财运整体呈上升趋势，上半年适合稳健投资，下半年可适当增加投资比例。偏财运势在第三季度最佳，有望获得意外收获。需注意控制冲动消费。</p>
                
                <div class="image-container single-image">
                    <img src="https://picsum.photos/id/1043/800/400" alt="财运分析图片">
                </div>
                
                <div class="fortune-tags">
                    <span class="fortune-tag highlight">投资方向：科技</span>
                    <span class="fortune-tag">理财建议：分散投资</span>
                    <span class="fortune-tag">关键期：Q3</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn">加载更多</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-tab">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-tab active">
            <i class="fas fa-star"></i>
            <span>星座</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 星座筛选切换
        const zodiacOptions = document.querySelectorAll('.zodiac-option');
        zodiacOptions.forEach(option => {
            option.addEventListener('click', () => {
                zodiacOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
                updateResultsCount();
            });
        });
        
        // 时间筛选切换
        const timeOptions = document.querySelectorAll('.time-option');
        timeOptions.forEach(option => {
            option.addEventListener('click', () => {
                timeOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
                updateResultsCount();
            });
        });
        
        // 运势类型筛选切换
        const categoryOptions = document.querySelectorAll('.category-option');
        categoryOptions.forEach(option => {
            option.addEventListener('click', () => {
                // 如果是"全部作者"选项，点击时只激活自己
                if (option.textContent.includes('全部作者')) {
                    categoryOptions.forEach(opt => {
                        if (opt.textContent.includes('作者')) {
                            opt.classList.remove('active');
                        }
                    });
                    option.classList.add('active');
                } 
                // 如果是其他作者选项，点击时取消"全部作者"的激活状态
                else if (option.textContent.includes('占星师') || option.textContent.includes('认证')) {
                    categoryOptions.forEach(opt => {
                        if (opt.textContent.includes('全部作者')) {
                            opt.classList.remove('active');
                        }
                    });
                    option.classList.toggle('active');
                } 
                // 普通分类选项
                else {
                    option.classList.toggle('active');
                }
                updateResultsCount();
            });
        });
        
        // 高级筛选展开/折叠
        const advancedFilterHeader = document.getElementById('advancedFilterHeader');
        const advancedFilterContent = document.getElementById('advancedFilterContent');
        const rotateIcon = advancedFilterHeader.querySelector('.rotate-icon');
        
        advancedFilterHeader.addEventListener('click', () => {
            advancedFilterContent.classList.toggle('show');
            rotateIcon.classList.toggle('rotate');
        });
        
        // 评分筛选
        const ratingStars = document.querySelectorAll('.rating-star');
        ratingStars.forEach(star => {
            star.addEventListener('click', () => {
                const rating = parseInt(star.getAttribute('data-rating'));
                
                ratingStars.forEach(s => {
                    const sRating = parseInt(s.getAttribute('data-rating'));
                    if (sRating <= rating) {
                        s.classList.add('active');
                    } else {
                        s.classList.remove('active');
                    }
                });
                updateResultsCount();
            });
        });
        
        // 重置筛选
        const resetFilterBtn = document.querySelector('.reset-filter');
        resetFilterBtn.addEventListener('click', () => {
            // 重置星座筛选
            zodiacOptions.forEach(opt => opt.classList.remove('active'));
            zodiacOptions[0].classList.add('active');
            
            // 重置时间筛选
            timeOptions.forEach(opt => opt.classList.remove('active'));
            timeOptions[0].classList.add('active');
            
            // 重置类型筛选
            categoryOptions.forEach(opt => {
                opt.classList.remove('active');
                if (opt.textContent.includes('综合运势') || opt.textContent.includes('全部作者')) {
                    opt.classList.add('active');
                }
            });
            
            // 重置评分筛选
            ratingStars.forEach((s, index) => {
                if (index < 3) { // 默认3星及以上
                    s.classList.add('active');
                } else {
                    s.classList.remove('active');
                }
            });
            
            updateResultsCount();
        });
        
        // 应用筛选
        const applyFilterBtn = document.querySelector('.apply-filter');
        applyFilterBtn.addEventListener('click', () => {
            // 模拟筛选应用
            applyFilterBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 筛选中...';
            
            setTimeout(() => {
                applyFilterBtn.textContent = '应用筛选';
                // 实际项目中这里会根据筛选条件更新列表
                alert('已应用筛选条件');
            }, 1000);
        });
        
        // 更新结果数量
        function updateResultsCount() {
            // 模拟结果数量计算
            const min = 5;
            const max = 20;
            const randomCount = Math.floor(Math.random() * (max - min + 1)) + min;
            
            document.querySelector('.result-count').textContent = `找到 ${randomCount} 条符合条件的运势`;
        }
        
        // 加载更多
        const loadMoreBtn = document.querySelector('.load-more-btn');
        loadMoreBtn.addEventListener('click', () => {
            loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            setTimeout(() => {
                loadMoreBtn.textContent = '加载更多';
                // 实际项目中添加加载更多内容逻辑
            }, 1500);
        });
        
        // 底部导航切换
        const navTabs = document.querySelectorAll('.nav-tab');
        navTabs.forEach(tab => {
            tab.addEventListener('click', (e) => {
                e.preventDefault();
                navTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
            });
        });
    </script>
</body>
</html>
    
